.pages-box{

}
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: relative;
  background: #fffefe;
}

#audio_btn{
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 200;
  display: none;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
}
.off{
  background-image: url("../images/normalmusic.svg");
  background-size: contain;
}
.rotate{
  -webkit-animation: rotating 1.2s linear infinite;
  -moz-animation: rotating 1.2s linear infinite;
  -o-animation: rotating 1.2s linear infinite;
  animation: rotating 1.2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.u-arrow-bottom {
  position: absolute;
  bottom: 15px;
  left: 50%;
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  transform: translate(-50%);
  z-index: 150;
  width: 0.45rem;
  height: 0.37rem;
}

.pre-wrap-bottom {
  width: 0.45rem;
  height: 0.37rem;
  background: url("../images/bottom-arrow.png") no-repeat center center;
  background-size: 100% 100%;
  position: relative;
  -webkit-animation: start 1.5s infinite ease-in-out;
  animation: start 1.5s infinite ease-in-out
}


@-webkit-keyframes start {
  0%, 30% {
    opacity: 0;
    -webkit-transform: translateY(10px)
  }

  60% {
    opacity: 1;
    -webkit-transform: translate(0)
  }

  to {
    opacity: 0;
    -webkit-transform: translateY(-8px)
  }
}

@keyframes start {
  0%, 30% {
    opacity: 0;
    transform: translateY(10px)
  }

  60% {
    opacity: 1;
    transform: translate(0)
  }

  to {
    opacity: 0;
    transform: translateY(-8px)
  }
}


.page1 {
  .top-box {
    height: 6.45rem;
    position: relative;
    margin-top: 1.36rem;

    .yuan-bg {
      position: absolute;
      bottom: 0;
      left: .93rem;
    }

    .tishi {
      position: absolute;
      z-index: 20;
    }

    .tishi_1 {
      left: 0;
      top: 0.9rem;
    }

    .tishi_2 {
      right: .4rem;
      top: -.4rem;
    }

    .tishi_3 {
      left: .22rem;
      top: 2.5rem;
    }

    .tishi_4 {
      left: 1.3rem;
      bottom: .56rem;
    }

    .tishi_5 {
      right: 1.3rem;
      bottom: 1.25rem;
    }

    .tishi_6 {
      right: 0;
      top: 2.05rem;
    }

    .top-center {
      position: absolute;
      top: 0;
      left: 1.50rem;
      z-index: 10;

      .title {
        position: absolute;
        top: .35rem;
        left: .42rem;
      }

      .search {
        position: absolute;
        top: 1.35rem;
        left: .42rem;
      }

      .article {
        position: absolute;
        top: 2.11rem;
        left: .42rem;
      }
    }
  }

  .bottombox {
    text-align: center;

    .text-box {
      margin-bottom: .55rem;

      .title {
        font-size: .62rem;
        color: #ff4523;
        font-weight: bold;
      }

      .desc {
        font-size: .5rem;
        color: #525252;

        span {
          font-weight: bold;
        }
      }
    }

    .bottomBtn {
      display: inline-block;
      background-image: -moz-linear-gradient(85deg, rgb(255, 158, 139) 1%, rgb(255, 177, 140) 100%);
      background-image: -webkit-linear-gradient(85deg, rgb(255, 158, 139) 1%, rgb(255, 177, 140) 100%);
      background-image: -ms-linear-gradient(85deg, rgb(255, 158, 139) 1%, rgb(255, 177, 140) 100%);
      box-shadow: -.04rem .057rem .5rem 0 rgba(255, 153, 119, 0.58);
      width: 2.90rem;
      height: .46rem;
      line-height: .46rem;
      z-index: 62;
      text-align: center;
      border-radius: 50px;
      color: #fff;
    }
  }
}

.page2 {
  .topbox {
    height: 4.30rem;
    background: url("../images/2-topbg.png") no-repeat top center;
    background-size: 100% 100%;
    color: #fff;
    padding-left: .5rem;
    padding-top: .75rem;

    .top-title {
      font-size: .62rem;
    }

    .top-desc {
      font-size: .46rem;
    }

    .line-white {
      width: .56rem;
      height: 2px;
      background: #fff;
      margin-top: .3rem;
    }
  }

  .page2-list-box {
    width: 6.50rem;
    margin: -1rem auto 0;

    .item {
      position: relative;
      width: 100%;
      height: 2.42rem;
      background: #fefefe;
      border-width: 1px;
      border-color: rgb(241, 241, 241);
      border-style: solid;
      border-radius: 8px;
      box-shadow: 0px 10px 50px 0px rgba(254, 81, 53, 0.3);
      margin-bottom: .3rem;

      &:nth-child(3) {
        .icon {
          right: .4rem;
          top: .42rem;
        }
      }

      //border:1px solid #ccc;
      img {
        position: absolute;
      }

      .dian {
        top: .05rem;
        left: .05rem;
      }

      .bgimg {
        right: .2rem;
        top: .2rem;
      }

      .icon {
        right: .67rem;
        top: .5rem;
      }

      .text-box {
        position: relative;
        z-index: 20;
        margin-left: .36rem;
        margin-top: .5rem;

        .title {
          color: #f34a25;
          font-size: .32rem;
          font-weight: bold;
        }

        .desc {
          color: #666666;
          font-size: .26rem;
          margin-top: .22rem;
        }
      }
    }
  }
}

.page3 {
  background: #fbfbfb;

  .topbox {
    height: 3.39rem;
    padding-left: .5rem;
    padding-top: .75rem;
    position: relative;

    img {
      position: absolute;
      right: 0;
      bottom: 0;
    }

    .top-title {
      font-size: .62rem;
      color: #333333;
    }

    .top-desc {
      font-size: .46rem;
      color: #666;
    }

    .line-red {
      width: .57rem;
      height: 2px;
      background: #ff5a37;
      margin-top: .3rem;
    }
  }

  .list-box {
    width: 6.50rem;
    margin: 0 auto;

    .item {
      background: #fff;
      margin-bottom: .35rem;
      box-shadow: 0px 5px 20px 4.5px rgba(255, 77, 52, 0.18);

      &.item2 {
        box-shadow: 0px 5px 20px 4.5px rgba(107, 157, 254, 0.18);
      }

      .top-title-bg-box, .top-title-bg-box2 {
        height: 1.75rem;
        background: url("../images/3-title.png") no-repeat top center;
        background-size: 100% 100%;
        padding-top: .25rem;

        .img-arrow {
          padding: 0.1rem .15rem 0 .15rem;
        }

        .top-text {
          font-size: .38rem;
          color: #fff;
        }
      }

      .top-title-bg-box2 {
        background: url("../images/3-title-bg-2.png") no-repeat top center;
        background-size: 100% 100%;
      }

      .bottom-desc-box {
        font-size: .28rem;
        color: #999;
        height: 1.7rem;
        padding-top: 0.35rem;

        .yuan-dian-box {
          padding: .22rem;
        }

        .yuan-dian {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #ccc;
        }
      }
    }
  }
}

.page4 {
  .topbox {
    height: 4.26rem;
    background: url("../images/4-top-bg_01.png") no-repeat top center;
    background-size: 100% 100%;
    color: #fff;
    padding-left: .5rem;
    padding-top: .75rem;

    .top-title {
      font-size: .62rem;
    }

    .top-desc {
      font-size: .46rem;
    }

    .line-white {
      width: .56rem;
      height: 2px;
      background: #fff;
      margin-top: .3rem;
    }
  }

  .scroll-box {
    height: 8rem;
    position: relative;
    margin-top: -1rem;
    z-index: 100;
    .swiper-slide{
      width: 5.1rem;
      padding:0 0.15rem;
      background: transparent;
    }
  }

  .scroll {
    display: inline-block;
    border-radius: 8px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 15px 33px 0px rgba(253, 73, 44, 0.18);
    width: 4.52rem;
    height: 7.27rem;
    text-align: center;
    .imgbox{
      height: 4.91rem;
      position: relative;
      .img-center-1{
        position: absolute;
        right:.4rem;
        top:1.45rem;
      }
      .img-center-2{
        position: absolute;
        right:.4rem;
        top:1.1rem;
      }
      .scroll-left-img{
        position: absolute;
        top:.7rem;
        left:.7rem;
      }
      .scroll-right-img{
        position: absolute;
        top:.62rem;
        left:.52rem;
      }
    }
    .title{
      font-size: .38rem;
      color:#333;
      margin-bottom: .1rem;
      }

    }
    .desc{
      font-size:.26rem;
      color:#666666;
      line-height: 1.8;
  }
}

.page5 {
  .top-box {
    position: relative;
    height: 5.36rem;
    margin-top: 1.43rem;

    img {
      position: absolute;
    }

    .center-img {
      top: .43rem;
      left: .93rem;
      z-index: 10;
    }

    .yun {
      left: .51rem;
      top: -.43rem;
    }
  }

  .text-box {
    text-align: center;
    margin-top: .44rem;
    .title {
      font-size: .62rem;
      color: #333333;
      position: relative;
      z-index: 100;
    }

    .line-red {
      display: inline-block;
      width: .57rem;
      height: 2px;
      background: #fc8e43;
      margin-top: .25rem;
      margin-bottom: .3rem;
    }
    .desc {
      font-size: .26rem;
      color: #727272;
      line-height: 0.5rem;
    }
  }
}
.page6{
  .top-box{
    height: 3.57rem;
    background: url("../images/6-top-bg.png") no-repeat top center;
    background-size:100% 100%;
    text-align: center;
    color:#fff;
    padding-top:.8rem;
    .title{
      font-size:.62rem;
      font-weight: bold;
    }
    .desc{
      font-size:.36rem;
      margin-top:.1rem;
    }
  }
  .page11-content {
    width: 6.46rem;
    background: #fff;
    margin: 0 auto;
    padding: 0.5rem .35rem .4rem;
    overflow: hidden;
    margin-top: -0.8rem;
    box-shadow: 0px 10px 30px 0px rgba(251, 87, 73, 0.28);
    border-radius: 5px;
    position: relative;
    z-index: 1000;
    .item {
      width: 100%;
      margin-bottom: 0.4rem;

      > div {
        color: #ff6b51;
        font-size: .3rem;
        font-weight: bold;
        margin-bottom: .1rem;

        img {
          margin-right: 0.15rem;
        }
      }

      input {
        width: 100%;
        height: .76rem;
        border: 0;
        border-radius: 5px;
        padding-left: 0.52rem;
        background: #ffe4d7;
        color: #fda57a;
        font-size: 14px;
      }

      input::-webkit-input-placeholder {
        color: #fda57a;
        font-size: 14px;
      }
    }

    button[type='submit'] {
      width: 100%;
      border-radius: 8px;
      border: 0;
      height: .76rem;
      font-size:.3rem;
      color:#fff;
      background-image: -moz-linear-gradient(5deg, rgb(255, 50, 32) 1%, rgb(255, 177, 140) 100%);
      background-image: -webkit-linear-gradient(5deg, rgb(255, 50, 32) 1%, rgb(255, 177, 140) 100%);
      background-image: -ms-linear-gradient(5deg, rgb(255, 50, 32) 1%, rgb(255, 177, 140) 100%);
    }

  }
}